<template>
  <div class="quicktemplate-container">
    <div v-show="!qtShowPoint" class="qkt-open" @click="qtOpenClose">
      <el-popover
        placement="left"
        width="200"
        trigger="hover"
        content="展开快速排班条件模板">
        <i slot="reference" class="el-icon-tickets"></i>
      </el-popover>
    </div>
    <div v-show="qtShowPoint" class="qkt-box">
      <div class="qkt-wrap" v-if="qtShowCont">
        <div class="qkt-header">
          <el-row>
            <el-col :span="16">
              <el-form
                :inline="true"
                :model="formdata"
                @submit.native.prevent
                class="ky-form-inline ky-form-inline-sm">
                <el-form-item label="">
                  <roomCascader
                    :room.sync="formdata.room"
                    :room-flag="false"
                    @roomChange="searchTemp"></roomCascader>
                </el-form-item>
                <!-- <el-form-item label="">
                  <el-input placeholder="搜索快捷排班" v-model="formdata.key">
                    <el-button slot="append" type="primary" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item> -->
              </el-form>
            </el-col>
            <el-col :span="8">
              <div style="text-align: right;line-height: 46px;">
                <el-button type="danger" plain size="small" :disabled="!currTemObj" @click="delTemp"><i class="el-icon-delete"></i></el-button>
                <el-button type="warning" plain size="small" :disabled="!currTemObj" @click="editTemp" title="编辑"><i class="el-icon-edit"></i></el-button>
                <el-button type="primary" size="small" :disabled="!formdata.room.length" @click="addTemp"><i class="el-icon-plus"></i></el-button>
                <span class="qkt-close" @click="qtOpenClose"><i style="margin-right:4px;" class="el-icon-caret-bottom"></i>收起</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="qkt-main">
          <div class="qkt-row">
            <template v-if="tempData.length>0">
              <div
                class="qkt-item"
                v-for="(item, index) in tempData"
                :key="index"
                :class="currTemObj&&item.id === currTemObj.id?'qkt-active':''"
                @click="activeItem(index)">
                <div class="txt fc-blue">{{item.recordCode}}</div>
                <!-- <div class="txt">{{item.time}}分钟</div> -->
                <div class="txt"><img :src="imgzy" class="temp-icon"/>{{item.checkNum}} 号源数</div>
                <div class="txt"><img :src="imgyl" class="temp-icon"/>{{item.reserveNum}} 预留</div>
                <div class="tag" v-if="currTemObj&&item.id === currTemObj.id">
                  <i class="el-icon-check tag_icon"></i>
                </div>
              </div>

            </template>
            <div v-else class="ky-listnone">暂无可选择快捷数据</div>
          </div>
        </div>
        <div v-if="tempData.length>0" style="padding: 0 15px;">
          <paginationCont
            :total="totalCount"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="searchTemp"
          />
        </div>
      </div>
    </div>
    <templateParameterForm
      ref="templateParameterForm"
      :temp-title.sync="tempTitle"
      @addScheduleTempSave="addScheduleTempSave"
      @editScheduleTempSave="editScheduleTempSave"
    ></templateParameterForm>
  </div>
</template>

<script>
import {
  deleteAppointmentparameterdmb
} from '@/api/api'
import { getAppointmentParamsTempList, addAppointmentParamsTemp, eidtAppointmentParamsTemp } from '@/api/room'
import roomCascader from '../components/roomCascader'
import paginationCont from '@/components/Pagination/index'
import templateParameterForm from '../components/templateParameterForm'
import imgyl from '@/assets/images/yl.png'
import imgzy from '@/assets/images/ziyuan.png'
import imgsj from '@/assets/images/time-circle.png'
// const objTemp = {
//   'id': 2,
//   'time': 20,
//   'hospitalCode': '', // 医院编号
//   'recordCode': '', // 编码
//   'depArea': '', // 影像区域
//   'dep': '', // 检查部门
//   'modality': '', // 检查设备
//   'checkRoom': '', // 检查机房
//   'appointmentDate': '2021-05-11T03:08:43.022Z', // 检查日期
//   'week': '', // 星期几
//   'checkClass': '', // 检查班次
//   'beginTime': '08:00', // 检查开始时间
//   'endTime': '9:30', // 检查结束时间
//   'initialNum': '3', // 初始号码
//   'checkNum': '20', // 检查数量
//   'reserveNum': '5', // 预留数量
//   'addNum': '5', // 追加数量
//   'callNum': '0', // 已预约数量
//   'operatorName': '', // 操作人
//   'operatorDate': '2021-05-11T03:08:43.022Z', // 操作时间
//   'appointmentStatus': '0', // 预约时段状态:5暂停预约、2节假日、4正常预约、3设备故障、1计划排班
//   'remark1': '增强CT',
//   'remark2': '',
//   'remark3': '',
//   'season': '1', // 时令
//   'department': '' // 所属科室
// }
export default {
  components: {
    roomCascader,
    paginationCont,
    templateParameterForm
  },
  props: {
    qtShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      qtShowCont: false,
      imgyl: imgyl,
      imgzy: imgzy,
      imgsj: imgsj,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      formdata: {
        room: [],
        key: ''
      },
      tempData: [],
      currTemObj: null,

      isAdd: true,
      brush: true,
      tempTitle: '' // 排班新增弹框标题
    }
  },
  computed: {
    qtShowPoint: {
      get() {
        return this.qtShow
      },
      set(val) {
        this.$emit('update:qtShow', val)
      }
    }
  },
  watch: {
    qtShowPoint(val) {
      if (!val) {
        this.currTemObj = null
        this.qtShowCont = false
      } else {
        this.qtShowCont = true
        this.searchTemp()
      }
    }
  },
  methods: {
    searchTemp() {
      this.currentPage = 1
      this.getTempList()
    },
    getTempList() {
      if (!this.qtShowPoint) return
      if (this.formdata.room && this.formdata.room.length === 0) {
        this.tempData = []
        this.currTemObj = null
        return
      }
      const params = {
        HospitalCode: this.formdata.room[0],
        DepArea: this.formdata.room[1],
        Dep: this.formdata.room[2],
        ModalityType: this.formdata.room[3],
        CheckRoom: this.formdata.room[4],
        IsHasFilters: true
      }
      this.currTemObj = null
      this.$emit('quickTempChange', this.currTemObj)
      getAppointmentParamsTempList(params).then(res => {
        if (res && res.code === 10000) {
          this.tempData = res.content.list
        }
      })
    },
    checkRoomInit(room) {
      this.formdata.room = room
    },
    // 展开、收起快捷选项
    qtOpenClose() {
      console.log(this.qtShowPoint)
      this.qtShowPoint = !this.qtShowPoint
      this.$nextTick(() => {
        if (!this.qtShowPoint) {
          // 如果收起，则选中数据清除
          this.currTemObj = null
          this.$emit('quickTempChange', this.currTemObj)
        }
      })
    },
    // 选择模板
    activeItem(index) {
      if (this.currTemObj && this.currTemObj.id === this.tempData[index].id) {
        this.currTemObj = null
      } else {
        this.currTemObj = this.tempData[index]
      }
      this.$emit('quickTempChange', this.currTemObj)
    },
    // 新增
    addTemp() {
      this.isAdd = true
      console.log('addTemp:====')
      // objTemp.id++
      // this.tempData.push({ ...objTemp })
      this.tempTitle = '新增参数模板'
      const data = {
        // time: '08:00-17:30',
        tempInfo: null,
        room: this.formdata.room,
        brush: this.brush
      }
      this.$refs.templateParameterForm.init(data)
      this.brush = false
      // parametersName: "患者最大年龄"
      // parametersType: "AgeEnd"
      // parametersValues: "0"
    },
    async addScheduleTempSave(data) {
      const temp = {
        hospitalCode: this.formdata.room[0],
        depArea: this.formdata.room[1],
        dep: this.formdata.room[2],
        modalityType: this.formdata.room[3],
        CheckRoom: this.formdata.room[4],

        addNum: data.addNum * 1,
        beginTime: data.beginTime,
        checkNum: data.checkNum * 1,
        endTime: data.endTime,
        reserveNum: data.reserveNum * 1,
        recordCode: data.recordCode,
        appointmentFilters: [
          // {
          //   parametersName: '患者最大年龄',
          //   parametersType: 'AgeEnd',
          //   parametersValues: '0'
          // }
          ...data.appointmentFilters
        ]
      }
      await addAppointmentParamsTemp(temp).then(res => {
        if (res && res.code === 10000) {
          this.$message.success(res.message)
        }
      })
      this.brush = true
      this.getTempList()
    },
    // 编辑
    editTemp() {
      this.tempTitle = '编辑参数模板'
      const data = {
        time: '8:00-17:30',
        tempInfo: this.currTemObj,
        room: this.formdata.room,
        brush: this.brush
      }
      this.$refs.templateParameterForm.init(data)
      this.brush = false
    },
    async editScheduleTempSave(data) {
      await eidtAppointmentParamsTemp(data).then(res => {
        if (res && res.code === 10000) {
          this.$message.success(res.message)
        }
      })
      this.getTempList()
    },
    // 删除
    delTemp() {
      this.$confirm('您确定要删掉' + this.currTemObj.recordCode + '模板参数?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            HospitalCode: this.currTemObj.hospitalCode,
            Id: this.currTemObj.id
          }
          deleteAppointmentparameterdmb(data).then(async (res) => {
            if (res && res.code === 10000) {
              this.$message.success(res.message)
              this.getTempList()
            } else {
              this.$message.warning(res.message)
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.quicktemplate-container{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 11;
  .qkt-open{
    position: fixed;
    right: 24px;
    bottom: 74px;
    z-index: 10;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #1890FF;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.16);
    cursor: pointer;
    &:hover{
      box-shadow: 0 5px 14px rgba(0,0,0,0.22);
    }
  }
  .qkt-box{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
    // padding-left: 210px;
  }
  .qkt-wrap{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 -3px 5px rgba(116, 116, 116, 0.16);
    padding:10px 0;
  }
}
.qkt-header{
  padding: 0 10px;
  .qkt-close{
    color: #1890FF;
    margin: 0 6px;
    cursor: pointer;
  }
}
.qkt-main{
  width: 100%;
  height: 140px;
  padding: 10px 10px 0;
  overflow-y: auto;
  .qkt-row{
    display: flex;
    flex-wrap: wrap;
    .qkt-item{
      min-width: 220px;
      padding: 10px;
      border: solid 1px #DBDFE9;
      border-radius: 3px;
      margin:0 10px 10px 0;
      font-size: 12px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      position: relative;
      &:hover{
        box-shadow: 0 3px 5px rgba(116, 116, 116, 0.16);
      }
      .txt{
        margin:0 10px;
      }
      .fc-blue{
        color: #0091FF;
      }
      .temp-icon{
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -3px;
        margin-right: 3px;
      }
      .tag{
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        border-color: transparent #0091FF #0091FF transparent;
        border-style: solid;
        border-width: 12px;
        .tag_icon{
          position: absolute;
          top: -2px;
          right: -10px;
          color: #fff;
        }
      }
    }
    .qkt-active{
      border-color:#0091FF
    }
  }
}
</style>
